<template>
	<div class="routineinform">
		<el-card>
			<template #header>
				<div class="card-header clearfix">
					<span class="headerTitle">通知中心</span>
					<div class="floatRight">
						<el-button type="primary" v-if="isAuthBtn('add')" @click="state.addInFoShow=true;"><i class="fa fa-send"></i>发布通知</el-button>
					</div>
				</div>
			</template>
			<div class="dataList">
				<div v-if="state.dataList.length>0">
					<el-timeline>
						<el-collapse v-model="state.activeName" accordion>
							<el-timeline-item center :timestamp="item.create_time" placement="top" v-for="item,index in state.dataList" :key="item.id">
								<el-card>
								<el-collapse-item  :name="item.id">
									<template #title>
										<div>
											{{item.notice_title}}
										</div>
									</template>
									<div v-html="item.notice_content">
									</div>
								</el-collapse-item>
								</el-card>
							</el-timeline-item>
						</el-collapse>
					</el-timeline>
				</div>
				<el-empty description="暂无通知" v-else></el-empty>
			</div>
			<div class="pagination-block clearfix">
				<div class="pagination-right">
					<el-pagination
					v-model:current-page="state.pages.pno"
					v-model:page-size="state.pages.pageSize"
					:page-sizes="[10, 50, 100, 200]"
					layout="total, sizes, prev, pager, next, jumper"
					:total="state.pages.recordCount"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					/>
				</div>
			</div>
		</el-card>
		<!--发布消息弹窗-->
		<el-dialog
			v-model="state.addInFoShow"
			title="发布通知"
			center
		>
			<div>
				<el-form :model="infoForm" ref="infoFormRef" :rules="rules" label-width="120px" status-icon>
					<el-form-item label="标题" prop="notice_title">
						<el-input v-model="infoForm.notice_title" />
					</el-form-item>
					<el-form-item label="类型">
						<el-radio-group v-model="infoForm.tzlx" size="small" @change="tzlxchange">
							<el-radio-button label="all">全部</el-radio-button>
							<el-radio-button label="gl">管理层</el-radio-button>
							<el-radio-button label="id">用户</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="通知的用户" v-if="infoForm.tzlx=='id'" prop="user">
						<el-select
							v-model="infoForm.user"
							:multiple="false"
							filterable
							remote
							clearable
							reserve-keyword
							placeholder="请输入昵称进行搜索"
							:remote-method="getUserList"
							:loading="state.userLoading"
						>
							<el-option
							v-for="item in state.userList"
							:key="item.uid"
							:label="item.nickName"
							:value="item.uid"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="内容" prop="notice_text">
						<Editor :disable="!state.addInFoShow" v-model:get-html="infoForm.notice_content"  v-model:get-text="infoForm.notice_text"/>
						<!-- <Editor v-model:get-html="state.editor.htmlVal" v-model:get-text="state.editor.textVal" :disable="state.editor.disable" /> -->
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.addInFoShow = false">取消</el-button>
					<el-button type="primary" @click="queding">发布</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { toRefs,ref, reactive,onMounted, defineComponent } from 'vue';
import { useRouter } from 'vue-router'
import { getinFormList,userApi } from '/@/api/user';
import Editor from '/@/components/editor/index.vue';
import { ElNotification, ElMessage ,ElMessageBox} from 'element-plus'
// const activeName = ref();
const infoFormRef = ref();
const router = useRouter();

const state = reactive({
	roleBtn:router.currentRoute.value.meta.roleBtn,
	dataList:[],
	pages: {
        isAll: false,
        pageCount: 0,
        pageSize: 10,
        recordCount: 0,
        pno: 1
      },
	activeName:"",
	userList:[],
	userLoading:true,
	addInFoShow:false,
});
const infoForm = reactive({
	notice_title:"",
	notice_type:"1",
	user:"all",
	notice_content:"",
	notice_text:"",
	path:"",
	tzlx:"all"
});
const rules = reactive<FormRules>({
  notice_title: [
    { required: true, message: '请输入通知标题', trigger: 'blur' },
    { min: 3,  message: '最少4个字', trigger: 'blur' },
  ],
  user: [
    { required: true, message: '请选择通知用户', trigger: 'blur' },
  ],
  notice_text: [
    { required: true, message: '请输入通知类容', trigger: 'blur' },
  ],
});
const handleSizeChange = (val: number) => {
  state.pages.pageSize=val;
  getmsgList();

}
const handleCurrentChange = (val: number) => {
  getmsgList(val);
}
const tzlxchange= () => {
  if(infoForm.tzlx=='id'){
	  infoForm.user="";
	  getUserList();
  }else{
	  infoForm.user=infoForm.tzlx;
  }
}
const queding = () => {
	infoFormRef.value.validate((valid) => {
		if (valid) {
			let dt={
				notice_title:infoForm.notice_title,
				notice_type:infoForm.notice_type,
				user:infoForm.user,
				notice_content:infoForm.notice_content,
			};
			userApi("addInForm",dt).then(res=>{
				infoForm.notice_title="";
				infoForm.notice_type="1";
				infoForm.user="all";
				infoForm.notice_content="";
				infoForm.notice_text="";
				infoForm.path="";
				infoForm.tzlx="all";
				ElNotification({
					message: "发布成功",
					type: 'success',
				});
				state.addInFoShow=false;
			})
		}
	})
}
// 权限判断
const isAuthBtn = (e) => {
	let auth=false;
	if(e){
		for(let p of state.roleBtn){
			if(p==e){
				auth=true;
			}
		}
	}
	return auth;
};
// 跳转
const tourl = (e) => {
	router.push(e);
};
// 获取系统通知信息
function getmsgList(pno){
	if (!pno) {
      pno = 1;
    }
	let dt={
		isread:true,
		pages:{
			isAll:state.pages.isAll,
			pno:pno,
			pageSize:state.pages.pageSize,
		}
	}
	getinFormList(dt).then(res=>{
		state.dataList=res.list;
		state.pages=res.pages;
		// console.log(res)
		// state.infoList=newlt;
	})
};
// 获取用户列表
function getUserList(query: string){
	state.userLoading=true;
	let dt={
		pages:{
			pno:1,
			pageSize:30,
		},
		data:{
			key:query
		}
	}
	userApi("userList",dt).then(res=>{
		state.userList=res.list;
		state.userLoading=false;
	})
};
onMounted(()=>{
      // 获取当前路由实例参数
    //   console.dir(router.currentRoute.value.query.id);
	  if(!isAuthBtn('index')){
		  router.push('/401');
	  }else{
	  	if(router.currentRoute.value.query.id){
			state.activeName=router.currentRoute.value.query.id;
		}
	  	getmsgList();
	  }
})
</script>
<style>
	.dataList .el-collapse{
		border:none!important;
	}
	.dataList .el-collapse-item__header{
		border:none!important;
	}
	.dataList .el-collapse-item__wrap{
		border:none!important;
	}
	.dataList .el-card__body{
		padding-top:0!important;
		padding-bottom:0!important;
	}
</style>
<style scoped lang="scss">
	.routineinform{
		padding:5px;
		.header-right{
			float:right;
		}
	}
</style>
